//风控管理 - 策略集

import React, { Component } from 'react';
import { LocaleProvider, Icon, Button, Table, Tag } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';

const { Column } = Table;

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
    key: i,
    number: `${50+i}`,
    applicableProduct: '白鲨钱包',
    issue: `贷前-策略${i}`,
    ruleNumber: 3,
    status:'正常',
    cz:['配置规则', '激活']
  });
}

const pagination = {
	total: 50,
	className: 'pagination-position',
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => {
    return `共 ${total} 条`;
  }
}

class Strategy extends Component {
  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

	render() {
		return (
      <LocaleProvider locale={zh_CN}>
        <div className="apply">
          <div>
            <div>
              <Icon type="appstore" />
              <span className="apply-font">策略集管理</span>
              <div className="btn">
                <Button icon="redo" size="small">刷新</Button>
              </div>
            </div>
          </div>   
          <div className="line"></div>
          <div className="info-table">
            <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ pagination } bordered dataSource={data}>
              <Column title='编号' align='center' dataIndex='number' width='16%' />
              <Column title='适用产品' align='center' dataIndex='applicableProduct' width='16%' />
              <Column title='关联事件' align='center' dataIndex='issue' width='16%' />
              <Column title='规则条数' align='center' dataIndex='ruleNumber' width='16%' />
              <Column title='状态' align='center' dataIndex='status' width='16%' />
              <Column title='操作' align='center' dataIndex='cz' width='16%' 
                render={cz => (
                  <span>
                    {cz.map(cz => <Tag color="blue" key={cz}>{cz}</Tag>)}
                  </span>
                )} />
            </Table>
          </div>
        </div>
      </LocaleProvider>  
		);
	}
}

export default Strategy;